// 路由重定向组件：用户访问"/",重定向到"/home"
import {Navigate} from "react-router-dom";
import Home from "@/views/Home";

// 使用懒加载之后就不用这么引用组件了
// import About from "@/views/About";

// 使用懒加载引入组件
import React, {lazy} from "react";
const About = lazy(() => import("../views/About"))
const BlogList = lazy(() => import("../views/blog/List"))
const FileList = lazy(() => import("../views/file/List"))
const Study = lazy(() => import("../views/study/communication/Index"))
const Redux = lazy(() => import("../views/study/communication/Redux"))
const BlogAdd = lazy(() => import("../views/blog/Add"))
const NotFInd = lazy(() => import("../views/exception/404"))
const Login = lazy(() => import("../views/login/Index"))

// 懒加载模式的写法，需要外面套一层Loading的提示组件
const withLoadingComponent = (comp: JSX.Element) => (
    <React.Suspense fallback={<div>Loading....</div>}>
        {comp}
    </React.Suspense>
)

// 所有的路由都是/的子路由
const routes = [
    {
        path: '/',
        element: <Navigate to="/blog-list"/>
    },
    {
        path: '/404',
        element: withLoadingComponent(<NotFInd/>)
    },
    {
        path: '/',
        element: <Home/>,
        children: [
            {
                path: '/blog-list',
                element: withLoadingComponent(<BlogList/>)
            },
            {
                path: '/blog-add',
                element: withLoadingComponent(<BlogAdd/>)
            },
            {
                path: '/file-list',
                element: withLoadingComponent(<FileList/>)
            },
            {
                path: '/about',
                element: withLoadingComponent(<About/>)
            },
            {
                path: '/study',
                element: withLoadingComponent(<Study/>)
            },
            {
                path: '/redux',
                element: withLoadingComponent(<Redux/>)
            },
        ]
    },
    {
        path: '/login',
        element: <Login/>
    },
    {
        path: '*',
        element: <Navigate to="/404"/>
    }
]

export default routes